<template>
    <div class="box_cont flex_column_between">
        <div class="tit_cont flex_center_between"> 
            <span class="mytext">通知公告 </span> 
            <el-input class="search cur" style="width: 280px;border-radius: 20px;" placeholder="请输入消息标题或关键词搜索" v-model="search.title">
                <template slot="append">
                    <div @click="searchFun">搜索</div>
                </template>
            </el-input>
        </div>
        <div class="words_cont" v-loading="loading">
            <template v-if="listData.length > 0">
                <div class="item cur" v-for="(item, index) in listData" :key="index"> 
                    <p class="label">{{ item.title }}</p>
                    <div class="row_cont flex_center_between">
                        <div class="left_center" @click="goDetail(item.id)">
                            <p class="text">{{ item.abstract }}</p>
                        </div>
                        <div class="right_cont flex_center">
                            <span class="text1">{{ item.createTime }}</span>
                            <span class="text2" :class="{red: item.isView.value == 0}">{{ item.isView.name }}</span>
                            <img class="delete_img cur" src="@/assets/img/delete.png" alt="" @click="deleteMessage(item.id)" v-loading="deleteLoading[index] || false"> 
                        </div>
                    </div>
                    
                </div>
            </template>
            <template v-else>
                <empty type="1" text="暂无消息"></empty>
            </template>
        </div>
        <!-- 分页 -->
            <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                      @current-change="changePage" v-if="listData.length > 0"></pagination>
        
                      
    </div>
</template>
<script>
import { messageList, deleteMessage } from '@/api/message.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        bear_content
    },
    data() {
        return {
            loading: false,
            deleteLoading: [],
            search: {
                title: ''
            },
            listData: [],
            currentPage: 1, // 当前页
            pageSize: 15, // 每页条数
            total: 0, // 总条数
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
        async getList() {
          this.loading = true
          this.search.page = this.currentPage
          await messageList(this.search).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.listData = res.data.list
                    this.total = res.data.total
                    this.pageSize = res.data.perPage
                }
            })
        },
        goDetail(id) {
            this.$router.push({path: '/message/info', query: {id: id}})
        },
        deleteMessage(id, index) {
            if (this.deleteLoading[index]) {
                return false
            }
            this.$confirm('确认删除该消息吗？').then(el => {
                this.deleteLoading = []
                this.deleteLoading[index] = true
                deleteMessage({
                    ids: [id]
                }).then(res => {
                    this.deleteLoading[index] = false
                    if (res.error == 0) {
                        this.$message.success('删除成功')
                        this.getList()
                    }else {
                        this.$message.error(res.message)
                    }
                })
            })
            .catch(error => {});
        },
        changePage(page) {
            this.currentPage = page
            this.getList()
        },
        searchFun() {
            this.currentPage = 1
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

    .box_cont{
        padding: 3.4rem 3.2rem;
        .tit_cont{
            width: 100%;
            text-align: left;
            margin-bottom: 3.4rem;
            font-size: 2.4rem;
            .mytext{
                // margin-left: 16px;
            }
            .search{
                ::v-deep .el-input__inner{
                border-radius: 10px 0px 0px 10px !important;
                border: 1px solid $background-theme !important;

                }
            }
            ::v-deep .el-input-group__append{
                border-radius: 0px 10px 10px 0px;
                color: #fff;
                background:$background-theme;
                border: 1px solid $background-theme;
            }
        }
    }
    .words_cont{
        width: 100%;
        height: 0;
        flex: 1;
        overflow-y: scroll;
        
        .item{
            padding: 3.2rem 2rem 3.2rem 0;
            color: #3A3F5E;
            border-bottom: 1px solid #F0F2F4;
            .label{
                font-size: 2rem;
                font-family: Open Sans;
                display: block;
                width: 30rem;
            }
            .left_center{
                flex: 1;
                .text{
                    font-family: MicrosoftYaHei;
                    font-size: 1.6rem;
                    color: #626780;
                    margin-top: 1.5rem;
                }
            }
            // .flex_center{
                
            // }
            .right_cont{
                .text1{
                    margin-right: 2rem;
                    font-size: 1.6rem;
                    color: #626780;
                }
                .text2{
                    margin-right: 2rem;
                    font-size: 1.6rem;
                    color: rgb(204, 204, 204);
                }
                img{
                    width: 14.86px;
                    height: 16px;
                }
                img:hover{
                    content: url(@/assets/img/delete_1.png);
                }
            }
        }
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:$background-theme;
        }
        &::-webkit-scrollbar-track { 
            background: #fff;
            border-radius: 5px;
        }
    }
   
    .red {
        color: red !important;
    }
</style>